<template>
    <tnxel-fetch-cascader v-model="model" url="/api/meta/enums" value-name="key" text-name="caption"
        index-name="searchIndex" :disabled="disabled" :empty="empty" :filterable="filterable"
        :theme="theme"
        :params="{
            type: type,
            subtype:subtype,
            grouped: true,
        }" v-if="items && grouped"/>
    <tnxel-select ref="select" v-model="model" :id="id" :selector="selector" :items="items"
        value-name="key" text-name="caption" index-name="searchIndex"
        :default-value="defaultValue" :empty="empty" :empty-value="emptyValue"
        :placeholder="placeholder" :disabled="disabled" :filterable="filterable"
        :theme="theme" :size="size" :tag-click="tagClick" :change="change" v-else-if="items"/>
</template>

<script>
import Select, {isMultiSelector} from '../select/Select.vue';
import FetchCascader from '../fetch-cascader';

export default {
    name: 'TnxelEnumSelect',
    components: {
        'tnxel-select': Select,
        'tnxel-fetch-cascader': FetchCascader,
    },
    props: {
        id: [Number, String],
        value: [String, Number, Boolean, Array],
        selector: String,
        type: {
            type: String,
            required: true,
        },
        subtype: String,
        defaultValue: String,
        empty: {
            type: [Boolean, String],
            default: false,
        },
        emptyValue: {
            type: [String, Boolean, Number],
            default: () => null,
        },
        placeholder: String,
        disabled: Boolean,
        tagClick: Function,
        change: Function,
        grouped: {
            type: Boolean,
            default: false,
        },
        filterable: Boolean,
        theme: String,
        size: String,
        app: {
            type: String,
            default: () => window.tnx.componentDefaultApp, // 设置为方法以延时加载，确保更改的值生效
        },
        formatter: Function,
    },
    data() {
        return {
            model: this.value,
            items: null,
        };
    },
    watch: {
        model(value) {
            this.$emit('input', value);
        },
        value() {
            this.initModel();
        },
        type() {
            this.init();
        },
        subtype() {
            this.init();
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            if (typeof this.type === 'string') {
                if (this.type.toLowerCase() === 'boolean') {
                    this.items = [{
                        key: true,
                        caption: true.toText(),
                    }, {
                        key: false,
                        caption: false.toText(),
                    }];
                    this.initModel();
                } else {
                    window.tnx.app.rpc.resolveEnumItems(this.type, this.subtype).then(items => {
                        if (this.formatter) {
                            let formattedItems = this.formatter(items);
                            if (formattedItems) {
                                items = formattedItems;
                            }
                        }
                        this.options = items || [];
                        this.initModel();
                    });
                }
            }
        },
        initModel() {
            let oldModel = this.model;
            this.model = this.value;
            if (isMultiSelector(this.selector)) {
                return;
            }
            if ((this.model === undefined || this.model === null) && !this.empty && this.items && this.items.length) {
                let item = this.items[0];
                this.model = item.key;
                if (this.model !== oldModel && this.change) {
                    this.change(item);
                }
            }
        },
        disableItem(itemKey, disabled, reverseOther) {
            this.$refs.select.disableItem(itemKey, disabled, reverseOther);
        },
    }
}
</script>
